<template>
    <van-cell-group inset class="shop-item">
		<van-cell is-link :to="'/shop/home?shopId='+shop.shopId">
			<template #title>
				<div>
					<div class="van-ellipsis">
						<van-tag color="var(--van-primary-color)" plain class="mgr5">5年</van-tag>
						<b class="font-16">{{shop.shopShortName}}</b>
					</div>
					<div class="tag-wrap">
						<div class="sign-tag unicom"><span>合作方全国店</span></div>
						<div class="medal" v-if="shop.cloubSupplier==='1'">小店代发</div>
						<div class="sign-other"><i class="txt-primary">{{shop.cautionMoney}}万</i>保障金</div>
						<div class="sign-other"><i class="txt-success">{{shop.allowBackDay}}天</i>可退</div>
					</div>
				</div>
			</template>
		</van-cell>
		<div class="van-cell" v-if="shop.offers && shop.offers.length>0">
			<ul class="goods-wrap">
				<router-link v-for="gds in shop.offers" key="gds.gdsId" :to="'/goods/detail?gdsId='+gds.gdsId">
					<van-image width="100%" height="100%" :src="gds.gdsImg" lazy-load/>
					<div class="price" v-if="gds.agentPrice&&gds.agentPrice>0">￥{{fen2Yuan(gds.agentPrice)}}</div>
					<div class="price" v-else><span class="font-12">指导价</span> ￥{{fen2Yuan(gds.agentPrice)}}</div>
				</router-link>
			</ul>
		</div>
		<van-cell :title="'主营：'+shop.shopCat+shop.shopCat" class="main-cat-text"></van-cell>
	</van-cell-group>
</template>
<style lang="scss" scoped>
.shop-item{
	margin-top:10px; margin-bottom:10px;
	:deep(.van-cell){padding:10px 12px;}
	:deep(.van-cell__title){
		flex:5;
		.van-ellipsis{line-height:18px;height:18px;width:calc(100vw - 70px);}
	}
	:deep(.van-cell__value){flex-shrink: 0;}
	.tag-wrap{
		margin-top:4px;display:flex;align-items: center;font-size:12px;height:14px;line-height:14px;
		cursor: default;color:var(--font-disable-color);
		&>div:not(:last-child){
			margin-right:4px; padding-right:4px; border-right:0.5px solid var(--font-disable-color);
		}
		.medal{color:var(--van-primary-color)}
	}
	.sign-tag{
		height:18px;border-radius:4px;color:var(--white-color);
		display:inline-flex; align-items: center;
		padding:0 6px 0 4px;
		margin-right:-8px!important; transform-origin:0 center;
		background-color: var(--van-primary-color);
		transform:scale(.8,.8);
		&>.iconfont{font-size:14px;margin-right:4px;}
		&.unicom{
			background-color: var(--van-unicom-color);
		}
		&.other{
			background-color: var(--van-success-color);
		}
	}
	.main-cat-text{
		color:var(--font-third-color); font-size:12px;
		:deep(.van-cell__title){
			overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
			height:14px;line-height:16px;
		}
	}
	.goods-wrap{
		overflow-x:auto;overflow-y:hidden;display:flex;margin:-5px 0;padding:0;
		a{
			display:block;position:relative;padding:0;margin:0 8px 0 0; flex-shrink: 0;
			width:25vw; aspect-ratio: 1;border-radius: 8px; overflow:hidden;
			&:last-child{margin-right:0}
			.price{
				position:absolute;bottom:0;left:0;width:100%;height:24px; padding:0 10px;
				line-height:24px;color:var(--white-color); background: rgba(0,0,0,.5);
			}
		}
	}
}
</style>
<script lang="ts" setup>
import {SearchShopItem} from "@/types";
import {fen2Yuan} from "@/utils/validate";

const props = defineProps<{
	shop:SearchShopItem,
}>()
</script>